Guide to become a Front-End Developer using Free resources

July 19, 2017

Tim Berners-Lee wrote a proposal in 1989 for a system called the World Wide Web. He also created HTML (Hypertext Markup Language) in 1990, for the purpose of formatting scientific documents. HTML is a markup language that gives structure and meaning to documents.

These documents were to be viewed on a browser-editor also created by Tim Berners-Lee. This was the first browser that people will recognise today. Although it had a GUI , it did not display images embedded in the text, rather displayed them in a separate window. This browser was named WorldWideWeb and later renamed Nexus to avoid confusion between the World Wide Web and the web browser.

Then came Mosaic, by Marc Andreessen, in February, 1993. It had a GUI and displayed images inline; embedded in pages alongside text, support for sound, video clips, forms support and bookmarks. Soon after it's release Mosaic became the most popular browser at the time. It was also the first commercial browser.

A year after creating Mosaic, Andreessen co-founded Netscape Communications which gave us the Netscape Navigator browser in December 1994 which was once the dominant browser in terms of usage share. On August 23rd, 1995, Microsoft released their Windows 95 operating system, including a Web browser called Internet Explorer. By the fall of 1996, Explorer had a third of market share, and passed Netscape to became the leading web browser in 1999.

Opera was first released publicly in 1996. Although Navigator and Internet Explorer had the largest market share by users, things began to change when Mozilla Foundation released Firefox in November 2004. Google also entered the browser market with Chrome in 2008.

As Internet became more popular and accessible around the world, developers and users became bored of the monotonous structure and style of the webpages. Variations in web browser implementations made consistent site appearance difficult, and users had less control over how web content was displayed. Appearance or presentation of the webpage became important. Developers started using HTML to provide ‘style’ to the webpages at the cost of more complicated code. HTML began to loose it's purpose of providing structure to the content. Now it was also used for presentation. In response CSS (Cascading Style Sheets) was developed to provide style sheets for the web. CSS was first proposed in 1994 and adopted in 1996 by Internet Explorer and Netscape Navigator.

Netscape’s Brendan Eich created Javascript programming language in ten days, as it was to be shipped with the latest beta version of Navigator in 1995. In March 1996, Netscape Navigator 2.0 was released, featuring support for JavaScript. Javascript was created for client side form validation which would remove the need of server side processing and reduce the wait time for people on slow connections. JavaScript adds behaviour to the web page where the web page is capable of responding to actions by your visitors without needing to load a new web page in order to process their request. Javascript was introduced as JScript in Internet Explorer by Microsoft. JScript was reverse engineered version implementation of Javascript.

During this period developers had to adapt their skills for all these different implementations of browsers and related technologies. The World Wide Web has come a long way since it’s inception. Today web browser not only show images and text, they play video, audio, online games, 3D graphics and animation and more. The technologies behind the browsers, HTML, CSS, and Javascript has also continued to evolve, as more features and improvements are incorporated into new versions of the standard.

Browsers, both mobile and desktop, are one of the most used piece of software today. There are number of libraries, frameworks, and some new technologies available to create a webpage. But the basic technology is still the same, HTML, CSS & Javascript. Learning these with other related technologies will set you on your path to became a web developer.

So, let's begin with finding out what's web development like today.

What is Web development ?

Web development is a broad term for the work involved in developing a web site for the Internet (World Wide Web) or an intranet (a private network). Web development can range from developing the simplest static single page of plain text to the most complex web-based internet applications (or just 'web apps') electronic businesses, and social network services. A more comprehensive list of tasks to which web development commonly refers, may include web engineering, web design, web content development, client liaison, client-side/server-side scripting, web server and network security configuration, and e-commerce development.

-- Wikipedia ( Web Development )

Today we are running entire businesses online with database for thousands of products, displayed on simple to navigate and functional webpage. Security for users data and performance on different connections still remain big cocern today. Today developers do not concern themselves with all aspects of development, instead they specialize in different domains. These domains are :

  • Front-End Development
  • Back-End Development
  • Full Stack Development

What is Front-end development ?

This is the part of website that the users interact with. The website along with all it's UI( User Interface) components, such as navigation bar, form, search-box etc. that the user interacts with, is what makes up the front-end. A front-end/client-side developer works with HTML, CSS, Javascript and related libraries and frameworks.

What is Back-end development ?

If you are creating a web application like an e-commerce website or any website that allows users to store, modify and delete the data and access it through interactive user interface; you need to store the data in a database, set up a server for handling user request to access, modify and delete data from database and serve dynamic content when required. A back-end/server-side developer works with PHP, Python, Database( like MySQL, PostgreSQL etc), Servers( like Apache, Nginx etc.) and related libraries and frameworks. Not all websites require a back-end. Product pages and portfolio websites don't need to store any data or generate dynamic web pages.

What is Full Stack development ?

Stack here is collection of software required for Web development such as an operating system (OS), a programming language, database software and a Web server. For some people full stack developer is someone who has mastery over all aspect of web stack. Others might consider a person familiar with entire stack, but specializes in part of technology as full stack developer.

This list provides free resources to help you become a front-end developer. I’ll include resources for back-end technologies once I dive into it. 😄

Jump to whatever section you want :

  1. HTML & CSS
  2. Javascript
  3. Related technologies

HTML & CSS

Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. HTML is used to define the structure and semantics of your content.

Cascading Style Sheets (CSS) allows you to style your web page once you have structured it. It defines layout of HTML documents.

Websites

Video Courses

HTML (Reference)

The following websites may prove useful to better understand certain concepts that are usually poorly understood.

CSS (Reference)

Javascript

Javascript is a programming language used to add functionality to your web pages and make them more dynamic. It adds behaviour to the web page where the web page is capable of responding to actions by your visitors without needing to load a new web page in order to process their request. JavaScript isn’t just for browsers anymore. The language is being used on the server thanks to Node.js, on desktop devices and mobiles through platforms such as Electron and Cordova.

Websites

Video Courses

Related technologies

For any front-end developer, tools such as a text editor and browsers provide powerful capabilities. When mastered they make your development process easier and more productive.

Browsers

This is a list of popular browsers in use. Based on your Operating System (and version) some may not be available for your system.( No worries you are already using your favourite browser now.😄 )

There is also what is called the Developer Edition of popular browsers, that are marketed to developers. These browsers implement the latest technologies, and powerful tools that simplify debugging and testing.

Note: There is also Safari and Microsoft Edge that are available for MacOS and Microsoft Windows respectively.

Note: Dev Tools work mostly same on every browser. If you are using browser other than Chrome or Firefox than I suggest that you learn dev tools using Chrome / Firefox.

Text Editors

Default text editors provided by your OS is not exactly productive for web development. There are some great text-editors that provide boatload of functionality. They makes writing and editing code much easier. Mastering your text-editor will boost your productivity and reduce your chances of writing bad code.

Below is a list of popular, free text-editors used for web development.

Version Control

Nearly every project out there is using a Version Control System (VCS). Version control is a system that records changes to a file or set of files over time so that you can recall specific versions later. For whatever reasons, if you want to undo the changes you made across the project or, you want to recover the files you accidentally deleted !

Enter Version Control 😎

Version Control will rescue you by allowing you to restore your project to a previous state. There are many VCS in use today. The most popular is Git which was created by Linus Torvalds, who created the linux kernel. Part of the reason git became popular as it is today is because of Github. Github allows you to host your code online and integrates git for version control.

Use the links below to learn Git & Github.

  • Pro Git → Only book you'll need to learn git.
  • Git and GitHub for Poets → Excellent video series that teaches you how to use Github and Git.
  • Try Git → 15 minutes to get up to speed with git.

This is by no means an exhaustive list of front-end technologies and resources. I will update the related technologies section in future. Meanwhile, these are some more guides/roadmaps that will surely help you. Do check them out.

  1. Watch this if you want to be a Web Developer.
  2. Web Developer Roadmap.
  3. Front-End Developer Handbook 2017. ( You can read this book online for free or download PDF, ePub or Mobi.)
TAGS →#resource#front-end

Build with Gatsby. Hosted on Netlify. The code is open source and available at Github.

© Aditya Rao - 2020